﻿<template>
  <div class="form-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      class="form-container"
    >
      <sticky
        v-if="isPreview === false"
        :z-index="10" :class-name="'sub-navbar draft'">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="isEdit === false ? createData() : updateData()"
        >保存</el-button>
      </sticky>
      <div class="form-main-container">
        <el-row v-if="false">
          <el-input v-model="temp.id" type="hidden" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="编码:" prop="code" class="form-container-item">
              <el-input v-model="temp.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="名称:" prop="name" class="form-container-item">
              <el-input v-model="temp.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="助记码:" prop="shortCode" class="form-container-item">
              <el-input v-model="temp.shortCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="详细地址:" prop="address" class="form-container-item">
              <el-input v-model="temp.address" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="负责人:" prop="head" class="form-container-item">
              <el-input v-model="temp.head" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="电话:" prop="phone" class="form-container-item">
              <el-input v-model="temp.phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="是否启用:" prop="isEnabled" class="form-container-item">
              <el-switch v-model="temp.isEnabled" active-color="#13ce66" inactive-color="#dcdfe6" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="客户类型:" prop="clientType" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.clientType" placeholder="请选择分区">
                <el-option v-for="item in clientTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="备注:" prop="remark" class="form-container-item">
              <el-input v-model="temp.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { create, get, update } from '@/api/client'

export default {
  name: 'ClientDetail',
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        id: null,
        code: '',
        name: '',
        shortCode: '',
        address: '',
        head: '',
        phone: '',
        isEnabled: true,
        clientType: 0,
        remark: '',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        isEnabled: [{ required: true, message: '是否启用必须填写', trigger: 'blur' }],
        clientType: [{ required: true, message: '客户类型必须填写', trigger: 'blur' }],
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {},
      clientTypeOptions: [
        {
          value: 1,
          label: '货主'
        },
        {
          value: 2,
          label: '供应商'
        },
        {
          value: 3,
          label: '客户'
        }
      ]
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        code: '',
        name: '',
        shortCode: '',
        address: '',
        head: '',
        phone: '',
        isEnabled: true,
        clientType: 0,
        remark: '',
      }
    },
    handleCreate() {
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          create(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleUpdate(id) {
      get(id).then(response => {
        this.temp.id = response.data.id
        this.temp.code = response.data.code
        this.temp.name = response.data.name
        this.temp.shortCode = response.data.shortCode
        this.temp.address = response.data.address
        this.temp.head = response.data.head
        this.temp.phone = response.data.phone
        this.temp.isEnabled = response.data.isEnabled
        this.temp.clientType = response.data.clientType
        this.temp.remark = response.data.remark
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.setTagsViewTitle()
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const tempData = Object.assign({}, this.temp)
          const { id } = this.temp
          update(id, tempData).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    setTagsViewTitle() {
      const title = '编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.form-container {
  position: relative;

  .form-main-container {
    padding: 40px 45px 20px 50px;

    .form-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .form-container-item {
        float: left;
      }
    }
  }
}
</style>
